<template>
    <!-- 首页-常用快捷菜单 -->
    <div class="ShortcutMenu">
        <div class="title">常用快捷菜单</div>
        <div class="menuBox">
            <ul class="menuList">
                <div class="swiperBox" v-if="shortcutMenuData.length>0">
                    <swiper :options="swiperOption">
                        <swiper-slide v-for="item in shortcutMenuData" :key="item.ruleId">
                            <li @click="menuClick(item)">
                                <img :src="item.iconPath" />
                                <div class="name">{{ item.ruleName }}</div>
                            </li>
                        </swiper-slide>
                    </swiper>
                    <div class="swiper-button-prev" v-if="shortcutMenuData.length>10"></div>
                    <div class="swiper-button-next" v-if="shortcutMenuData.length>10"></div>
                </div>
                <div class="empty" v-else>Hi，您可以在右侧点击“+”号菜单，定制您的个性化常用快捷访问菜单哟~</div>
            </ul>
            <div class="addBtn" @click="handleAddMenu">
                <i class="el-icon-plus"></i>
            </div>
        </div>

        <!-- 添加快捷菜单 -->
        <div class="addMenuBox" v-if="showAdd">
            <i class="el-icon-close" @click="closeAdd"></i>
            <div class="addTitle">常用菜单设置</div>
            <el-input
                placeholder="输入菜单名称"
                v-model="searchText"
                @input="handleSearch">
                <i
                    slot="suffix"
                    class="el-input__icon el-icon-search">
                </i>
            </el-input>
            <ul class="menuList">
                <li :class="{actived: activedMenuIds.includes(item.ruleId)}" v-for="item in resultData" :key="item.ruleId" @click="menuSelect(item.ruleId)">
                    <span>{{ item.ruleName }}</span>
                    <i class="el-icon-success"></i>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { getRuleFastByDeptIdAPI, getAllRuleByDeptIdAPI, addUserRuleFastAPI } from "@/api/home"
export default {
    name: "ShortcutMenu",
    data() {
        return {
            deptId: "",
            shortcutMenuData: [], // 快捷菜单

            // 设置快捷菜单弹窗
            showAdd: false,
            allMenuData: [], // 所有菜单
            searchText: "",
            resultData: [],
            activedMenuIds: [],
            debounceTimer: null, // 防抖计时器标识

            swiperOption: {
                slidesPerView: 9,
                slidesPerGroup: 1,
                initialSlide: 0,
                spaceBetween:20,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            },
        }
    },
    watch: {
        currentPorject: {
            handler(val, oldVal) {
                if (val.deptId && oldVal && val.deptId != oldVal.deptId) {
                    this.deptId = val.deptId;
                    this.getRuleFastData()
                }
            },
            deep: true,
        },
    },
    computed: {
        currentPorject() {
            return this.$store.state.porjectObject
        },
    },
    created(){
        this.deptId = localStorage.getItem("deptId")
        this.getRuleFastData()
    },
    methods: {
        // 获取快捷菜单数据
        getRuleFastData(){
            getRuleFastByDeptIdAPI(this.deptId).then(res=>{
                this.shortcutMenuData = res.data
                let menuIds = []
                res.data.forEach(element => {
                    menuIds.push(element.ruleId)
                });
                this.activedMenuIds = menuIds
            })
        },

        // 获取所有菜单
        getAllMenuData(){
            getAllRuleByDeptIdAPI(this.deptId).then(res=>{
                this.allMenuData = res.data
                this.resultData = res.data
            })
        },

        // 菜单跳转
        menuClick(item){
            if(item.path){
                this.$router.push({
                    path: item.path,
                })
            }else{
                if(item.childList && item.childList.length>0){
                    let childList = item.childList.sort((a, b) => a.index - b.index)
                    this.$router.push({
                        path: childList[0].path,
                    })
                }
            }
        },

        // 显示添加快捷菜单弹窗
        handleAddMenu(){
            this.showAdd = true
            this.getAllMenuData()
        },

        // 菜单搜索
        handleSearch(val){
            if (this.debounceTimer) clearTimeout(this.debounceTimer)
            this.debounceTimer = setTimeout(() => {
                this.resultData = this.allMenuData.filter(v => {
                    return v.ruleName.includes(val)
                })
            }, 300)
        },

        // 选择菜单
        menuSelect(id){
            const index = this.activedMenuIds.indexOf(id)
            if (index != -1) {
                this.activedMenuIds.splice(index, 1)
            } else {
                this.activedMenuIds.push(id)
            }

            let params = {
                deptId: this.deptId,
                ruleIds: this.activedMenuIds
            }
            addUserRuleFastAPI(params).then(res=>{
                this.$message.success("操作成功")
            })
        },

        // 关闭
        closeAdd(){
            this.searchText = ""
            this.showAdd = false
            this.getRuleFastData()
        }
    },
}
</script>

<style scoped lang="less">
.ShortcutMenu {
    margin-top: 30px;
    .title {
        margin-bottom: 15px;
        font-size: 16px;
        color: #333333;
        font-weight: 700;
        line-height: 1;
    }
    .menuBox {
        height: 116px;
        display: flex;
        .menuList {
            width: calc(100% - 180px);
            height: 100%;
            padding: 0 30px;
            margin-right: 40px;
            border-radius: 5px;
            border: 1px solid #ececec;
            background-color: #ffffff;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            position: relative;
            .swiperBox{
                max-width: 100%;
                overflow: hidden;
            }
            .empty{
                flex: 1;
                text-align: center;
                font-size: 16px;
                color: #7a7b7c;
            }
            li {
                // margin-right: 70px;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: center;
                &:last-of-type{
                    margin-right: 0;
                }
                img{
                    width: 60px;
                    height: 60px;
                }
                .name {
                    margin-top: 10px;
                    font-size: 16px;
                    color: #333333;
                    text-align: center;
                    line-height: 1;
                    white-space: nowrap;
                }
            }
            /deep/.swiper-slide{
                width: auto !important;
                margin-right: 100px !important;
                &:last-of-type{
                    margin-right: 0 !important;
                }
            }
            .swiper-button-prev,.swiper-button-next{
                width: 30px;
                height: 30px;
                transition: all 0.2s ease;
                &:hover{
                    &::after{
                        font-size: 22px;
                        font-weight: 700;
                        color: #006CFF;
                    }
                }
                &::after{
                    font-size: 22px;
                    font-weight: 700;
                    color: #666666;
                }
            }
            .swiper-button-prev{
                left: 5px;
            }
            .swiper-button-next{
                right: 5px;
            }
        }
        .addBtn {
            cursor: pointer;
            width: 140px;
            height: 100%;
            border-radius: 5px;
            border: 1px solid #ececec;
            background-color: #ffffff;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
                font-size: 50px;
            }
        }
    }
    .addMenuBox{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
        width: 435px;
        height: 500px;
        padding: 24px;
        box-sizing: border-box;
        border-radius: 8px;
        background-color: #ffffff;
        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2);
        transition: all 0.5s;
        .el-icon-close{
            position: absolute;
            top: 24px;
            right: 24px;
            font-size: 24px;
            color: #000000;
            font-weight: bold;
            cursor: pointer;
        }
        .addTitle{
            margin-bottom: 20px;
            font-size: 18px;
            color: #333333;
        }
        /deep/.el-input__inner {
            right: 15px;
            padding-right: 50px;
            border-radius: 5px;
            border-color: #dfdfdf;
        }
        /deep/.el-icon-search {
            font-size: 24px;
            cursor: pointer;
        }
        /deep/.el-input__suffix{
            right: 10px;
        }
        .menuList{
            margin-top: 20px;
            height: 350px;
            overflow: auto;
            &::-webkit-scrollbar {
                width: 6px;
            }
            /*滚动槽*/
            &::-webkit-scrollbar-track {
                display: none;
            }
            /* 滚动条滑块 */
            &::-webkit-scrollbar-thumb {
                // display: none;
                border-radius: 10px;
                background-color: rgba(144, 147, 153, 0.3);
            }
            li {
                height: 50px;
                padding: 0 15px;
                margin-bottom: 10px;
                border-radius: 5px;
                border: 1px solid #f0f0f0;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                cursor: pointer;
                position: relative;
                &:hover{
                    border-color: #d1dff1;
                    background-color: #d1dff1;
                }
                &:last-of-type{
                    margin-bottom: 0;
                }
                span{
                    font-size: 14px;
                    color: #333333;
                }
                i{
                    position: absolute;
                    right: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 22px;
                    color: #557af2;
                    display: none;
                }
            }
            .actived{
                border-color: #d1dff1;
                background-color: #d1dff1;
                i{
                    display: block;
                }
            }
        }
    }
}
</style>
